Refactoring the UI for consistent styling#776
Conversation
WalkthroughRefactors knowledge UI to use glassCard/DataCard styles and native Tabs, removes DocumentBrowser and its re-export, enhances ContentViewer with Prism + ReactMarkdown and a new copiedId prop, extends optimistic mutation contexts with tempItemId, adds dark-mode variants, and adjusts package devDeps and minor primitive formatting. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant UI as AddKnowledgeDialog
participant Hooks as useKnowledgeQueries
participant Server
rect rgba(220,245,255,0.35)
note right of UI: User triggers optimistic crawl/upload
User->>UI: Click "Crawl" / "Upload"
UI->>Hooks: mutate(payload)
Hooks->>Hooks: onMutate -> create tempProgressId & tempItemId
Hooks-->>UI: return { tempProgressId, tempItemId }
UI->>User: Render optimistic item/progress
end
Hooks->>Server: POST /crawl or /upload
alt success
Server-->>Hooks: 200 {id,...}
Hooks->>Hooks: replace temp ids with real id, update cache
Hooks-->>UI: onSuccess (cache update)
UI->>User: Show confirmed item
else error
Server-->>Hooks: 4xx/5xx
Hooks-->>UI: onError (rollback using returned context)
UI->>User: Show error/rollback
end
sequenceDiagram
autonumber
participant Sidebar as InspectorSidebar
participant CV as ContentViewer
participant Prism as Prism
participant MD as ReactMarkdown
Sidebar->>CV: select item {type, content, metadata, copiedId}
alt Code item
CV->>CV: detect language (metadata or fallback)
CV->>Prism: highlight(code, lang)
Prism-->>CV: highlighted HTML
CV->>User: render highlighted code block
else Document/Markdown
CV->>CV: stripOuterBackticks(content)
CV->>MD: render(markdown)
MD-->>CV: React nodes
CV->>User: render markdown content
end
User->>CV: Click Copy
CV->>Sidebar: onCopy(text, id)
Sidebar-->>CV: copiedId updated (show "Copied!")
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
archon-ui-main/src/features/knowledge/hooks/useKnowledgeQueries.ts (1)
307-316: Fix mutation context type for upload to include tempItemIdonMutate returns tempItemId, but the context type doesn’t declare it. This breaks strict TS. Add tempItemId: string to the 4th generic type.
Apply:
return useMutation< { progressId: string; message: string }, Error, { file: File; metadata: UploadMetadata }, - { - previousSummaries?: Array<[readonly unknown[], KnowledgeItemsResponse | undefined]>; - previousOperations?: ActiveOperationsResponse; - tempProgressId: string; - } + { + previousSummaries?: Array<[readonly unknown[], KnowledgeItemsResponse | undefined]>; + previousOperations?: ActiveOperationsResponse; + tempProgressId: string; + tempItemId: string; + } >({ @@ - return { previousSummaries, previousOperations, tempProgressId, tempItemId: tempProgressId }; + return { previousSummaries, previousOperations, tempProgressId, tempItemId: tempProgressId };Also applies to: 410-411
archon-ui-main/src/features/knowledge/components/LevelSelector.tsx (1)
86-110: Fix radiogroup keyboard accessibility (roving tabindex + arrow keys)
- When no value is selected, all items get tabIndex -1 → group is unreachable by keyboard.
- Arrow-key navigation (Left/Right/Up/Down) is expected for radios but not implemented.
Apply:
- <div className="grid grid-cols-2 sm:grid-cols-4 gap-3" role="radiogroup" aria-labelledby="crawl-depth-label"> - {LEVELS.map((level) => { + <div className="grid grid-cols-2 sm:grid-cols-4 gap-3" role="radiogroup" aria-labelledby="crawl-depth-label"> + {LEVELS.map((level, idx) => { const isSelected = value === level.value; @@ - tabIndex={isSelected ? 0 : -1} - onKeyDown={(e) => { - if (e.key === "Enter" || e.key === " ") { + tabIndex={disabled ? -1 : isSelected || (!value && idx === 0) ? 0 : -1} + onKeyDown={(e) => { + if (e.key === "Enter" || e.key === " ") { e.preventDefault(); if (!disabled) onValueChange(level.value); - } + } else if (!disabled && (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowUp")) { + e.preventDefault(); + const current = LEVELS.findIndex(l => l.value === value); + const delta = (e.key === "ArrowRight" || e.key === "ArrowDown") ? 1 : -1; + const next = current >= 0 ? (current + delta + LEVELS.length) % LEVELS.length : 0; + onValueChange(LEVELS[next].value); + } }}
🧹 Nitpick comments (10)
archon-ui-main/src/features/knowledge/inspector/components/InspectorSidebar.tsx (1)
105-108: Remove redundant dark mode classes with identical values.Lines 105 and 107 specify dark mode variants that are identical to the light mode values. In Tailwind CSS, when a dark mode class has the same value as its light mode counterpart, the
dark:prefix is unnecessary since the light mode value already applies to both modes.Apply this diff to remove the redundant classes:
className={cn( "w-full text-left p-3 rounded-lg mb-1 transition-all", - "hover:bg-white/5 dark:hover:bg-white/5 focus:outline-none focus:ring-2 focus:ring-cyan-500/50", + "hover:bg-white/5 focus:outline-none focus:ring-2 focus:ring-cyan-500/50", selectedItemId === item.id - ? "bg-cyan-500/10 dark:bg-cyan-500/10 border border-cyan-500/30 dark:border-cyan-500/30 ring-1 ring-cyan-500/20" + ? "bg-cyan-500/10 border border-cyan-500/30 ring-1 ring-cyan-500/20" : "border border-transparent", )}archon-ui-main/src/features/knowledge/hooks/useKnowledgeQueries.ts (1)
231-233: Context now returns tempItemId; verify downstream usageLooks good. Ensure UI consumers expecting tempItemId read it from the mutation context (and not just tempProgressId). Otherwise, consider removing to avoid confusion.
archon-ui-main/src/features/knowledge/components/AddKnowledgeDialog.tsx (2)
191-201: Prefer Button variants over heavy class overridesUse the existing Button variant="default" and only add width. Keeps style centralized and consistent.
Apply:
- <Button - onClick={handleCrawl} - disabled={isProcessing || !crawlUrl} - className={[ - "w-full bg-gradient-to-r from-cyan-500 to-cyan-600", - "hover:from-cyan-600 hover:to-cyan-700", - "backdrop-blur-md border border-cyan-400/50", - "shadow-[0_0_20px_rgba(6,182,212,0.25)] hover:shadow-[0_0_30px_rgba(6,182,212,0.35)]", - "transition-all duration-200", - ].join(" ")} - > + <Button + onClick={handleCrawl} + disabled={isProcessing || !crawlUrl} + variant="default" + className="w-full" + >As per coding guidelines
281-287: Align Upload button with Button variantUse variant="knowledge" and keep className minimal for width.
Apply:
- <Button - onClick={handleUpload} - disabled={isProcessing || !selectedFile} - className={[ - "w-full bg-gradient-to-r from-purple-500 to-purple-600", - "hover:from-purple-600 hover:to-purple-700", - "backdrop-blur-md border border-purple-400/50", - "shadow-[0_0_20px_rgba(147,51,234,0.25)] hover:shadow-[0_0_30px_rgba(147,51,234,0.35)]", - "transition-all duration-200", - ].join(" ")} - > + <Button + onClick={handleUpload} + disabled={isProcessing || !selectedFile} + variant="knowledge" + className="w-full" + >As per coding guidelines
archon-ui-main/src/features/knowledge/components/KnowledgeHeader.tsx (2)
57-63: Add accessible label and use type="search"Improve a11y: provide an explicit label and appropriate input type.
Apply:
- <Input - type="text" + <Input + type="search" placeholder="Search knowledge base..." value={searchQuery} onChange={(e) => onSearchChange(e.target.value)} - className="pl-10 bg-black/30 dark:bg-black/30 border-white/10 dark:border-white/10 focus:border-cyan-500/50" + aria-label="Search knowledge" + className="pl-10 bg-black/30 dark:bg-black/30 border-white/10 dark:border-white/10 focus:border-cyan-500/50" />As per coding guidelines
46-49: Button text clarityConsider “Add Knowledge” for clarity.
Apply:
- <Button variant="knowledge" onClick={onAddKnowledge} className="shadow-lg shadow-purple-500/30 flex-shrink-0"> - <Plus className="w-4 h-4 mr-2" /> - Knowledge - </Button> + <Button variant="knowledge" onClick={onAddKnowledge} className="shadow-lg shadow-purple-500/30 flex-shrink-0"> + <Plus className="w-4 h-4 mr-2" /> + Add Knowledge + </Button>archon-ui-main/src/features/knowledge/components/KnowledgeTable.tsx (1)
94-101: Optional: add scope to header cells for table a11yAdd scope="col" to th elements.
Apply:
- <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Title</th> - <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Type</th> - <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Source</th> - <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Docs</th> - <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Examples</th> - <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Created</th> - <th className="px-4 py-3 text-right text-sm font-medium text-gray-700 dark:text-gray-300">Actions</th> + <th scope="col" className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Title</th> + <th scope="col" className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Type</th> + <th scope="col" className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Source</th> + <th scope="col" className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Docs</th> + <th scope="col" className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Examples</th> + <th scope="col" className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">Created</th> + <th scope="col" className="px-4 py-3 text-right text-sm font-medium text-gray-700 dark:text-gray-300">Actions</th>archon-ui-main/src/features/knowledge/components/KnowledgeCard.tsx (1)
195-199: Use cn instead of join for className arraysFor consistency with primitives, prefer cn.
Apply:
- className={[ - "inline-flex items-center gap-1 text-xs mt-2", - "text-gray-600 dark:text-gray-400 hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors", - ].join(" ")} + className={cn( + "inline-flex items-center gap-1 text-xs mt-2", + "text-gray-600 dark:text-gray-400 hover:text-cyan-600 dark:hover:text-cyan-400 transition-colors", + )}As per coding guidelines
archon-ui-main/src/features/knowledge/inspector/components/ContentViewer.tsx (2)
109-113: Prefercnhelper over array join for classNamesFor consistency with primitives, use
cn(...)instead of[].join(" ").- <span - className={[ - "px-2 py-0.5 bg-green-500/10 text-green-600 dark:text-green-400", - "text-xs font-mono rounded flex-shrink-0", - ].join(" ")} - > + <span + className={cn( + "px-2 py-0.5 bg-green-500/10 text-green-600 dark:text-green-400", + "text-xs font-mono rounded flex-shrink-0", + )} + >Also add (top of file):
+import { cn } from "../../../ui/primitives/styles";
46-46: Silence console noise in productionGuard console.error to avoid noisy logs in prod builds.
- console.error("Prism highlighting failed:", error); + if (process.env.NODE_ENV !== "production") { + // eslint-disable-next-line no-console + console.error("Prism highlighting failed:", error); + }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
archon-ui-main/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (19)
archon-ui-main/package.json(1 hunks)archon-ui-main/src/features/knowledge/components/AddKnowledgeDialog.tsx(6 hunks)archon-ui-main/src/features/knowledge/components/DocumentBrowser.tsx(0 hunks)archon-ui-main/src/features/knowledge/components/KnowledgeCard.tsx(7 hunks)archon-ui-main/src/features/knowledge/components/KnowledgeCardTags.tsx(4 hunks)archon-ui-main/src/features/knowledge/components/KnowledgeCardType.tsx(2 hunks)archon-ui-main/src/features/knowledge/components/KnowledgeHeader.tsx(2 hunks)archon-ui-main/src/features/knowledge/components/KnowledgeList.tsx(2 hunks)archon-ui-main/src/features/knowledge/components/KnowledgeTable.tsx(1 hunks)archon-ui-main/src/features/knowledge/components/KnowledgeTypeSelector.tsx(4 hunks)archon-ui-main/src/features/knowledge/components/LevelSelector.tsx(3 hunks)archon-ui-main/src/features/knowledge/components/TagInput.tsx(4 hunks)archon-ui-main/src/features/knowledge/components/index.ts(0 hunks)archon-ui-main/src/features/knowledge/hooks/useKnowledgeQueries.ts(2 hunks)archon-ui-main/src/features/knowledge/inspector/components/ContentViewer.tsx(5 hunks)archon-ui-main/src/features/knowledge/inspector/components/InspectorHeader.tsx(2 hunks)archon-ui-main/src/features/knowledge/inspector/components/InspectorSidebar.tsx(3 hunks)archon-ui-main/src/features/knowledge/views/KnowledgeView.tsx(2 hunks)archon-ui-main/src/features/ui/primitives/switch.tsx(2 hunks)
💤 Files with no reviewable changes (2)
- archon-ui-main/src/features/knowledge/components/index.ts
- archon-ui-main/src/features/knowledge/components/DocumentBrowser.tsx
🧰 Additional context used
📓 Path-based instructions (10)
archon-ui-main/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
archon-ui-main/src/**/*.{ts,tsx}: Frontend TypeScript must use strict mode with no implicit any
Use TanStack Query for all data fetching; avoid prop drilling
Use database values directly in the frontend; avoid mapping layers between BE and FE typesNever return null to indicate failure in frontend TypeScript; throw errors with details instead
Files:
archon-ui-main/src/features/knowledge/views/KnowledgeView.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeList.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeCardTags.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeTypeSelector.tsxarchon-ui-main/src/features/knowledge/inspector/components/InspectorSidebar.tsxarchon-ui-main/src/features/knowledge/components/TagInput.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeCardType.tsxarchon-ui-main/src/features/knowledge/inspector/components/InspectorHeader.tsxarchon-ui-main/src/features/knowledge/hooks/useKnowledgeQueries.tsarchon-ui-main/src/features/knowledge/components/AddKnowledgeDialog.tsxarchon-ui-main/src/features/knowledge/components/LevelSelector.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeTable.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeCard.tsxarchon-ui-main/src/features/knowledge/inspector/components/ContentViewer.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeHeader.tsxarchon-ui-main/src/features/ui/primitives/switch.tsx
archon-ui-main/src/features/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use Biome in features: 120 character line length, double quotes, and trailing commas
Use Biome formatting/conventions in features (120 char lines, double quotes, trailing commas)
Files:
archon-ui-main/src/features/knowledge/views/KnowledgeView.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeList.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeCardTags.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeTypeSelector.tsxarchon-ui-main/src/features/knowledge/inspector/components/InspectorSidebar.tsxarchon-ui-main/src/features/knowledge/components/TagInput.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeCardType.tsxarchon-ui-main/src/features/knowledge/inspector/components/InspectorHeader.tsxarchon-ui-main/src/features/knowledge/hooks/useKnowledgeQueries.tsarchon-ui-main/src/features/knowledge/components/AddKnowledgeDialog.tsxarchon-ui-main/src/features/knowledge/components/LevelSelector.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeTable.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeCard.tsxarchon-ui-main/src/features/knowledge/inspector/components/ContentViewer.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeHeader.tsxarchon-ui-main/src/features/ui/primitives/switch.tsx
archon-ui-main/src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use ESLint rules for legacy frontend code outside /src/features
Files:
archon-ui-main/src/features/knowledge/views/KnowledgeView.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeList.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeCardTags.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeTypeSelector.tsxarchon-ui-main/src/features/knowledge/inspector/components/InspectorSidebar.tsxarchon-ui-main/src/features/knowledge/components/TagInput.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeCardType.tsxarchon-ui-main/src/features/knowledge/inspector/components/InspectorHeader.tsxarchon-ui-main/src/features/knowledge/hooks/useKnowledgeQueries.tsarchon-ui-main/src/features/knowledge/components/AddKnowledgeDialog.tsxarchon-ui-main/src/features/knowledge/components/LevelSelector.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeTable.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeCard.tsxarchon-ui-main/src/features/knowledge/inspector/components/ContentViewer.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeHeader.tsxarchon-ui-main/src/features/ui/primitives/switch.tsx
archon-ui-main/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
TypeScript strict mode with no implicit any in the frontend
Files:
archon-ui-main/src/features/knowledge/views/KnowledgeView.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeList.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeCardTags.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeTypeSelector.tsxarchon-ui-main/src/features/knowledge/inspector/components/InspectorSidebar.tsxarchon-ui-main/src/features/knowledge/components/TagInput.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeCardType.tsxarchon-ui-main/src/features/knowledge/inspector/components/InspectorHeader.tsxarchon-ui-main/src/features/knowledge/hooks/useKnowledgeQueries.tsarchon-ui-main/src/features/knowledge/components/AddKnowledgeDialog.tsxarchon-ui-main/src/features/knowledge/components/LevelSelector.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeTable.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeCard.tsxarchon-ui-main/src/features/knowledge/inspector/components/ContentViewer.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeHeader.tsxarchon-ui-main/src/features/ui/primitives/switch.tsx
archon-ui-main/src/features/**/*.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
Ensure no dynamic Tailwind class construction (avoid runtime-generated class strings)
Files:
archon-ui-main/src/features/knowledge/views/KnowledgeView.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeList.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeCardTags.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeTypeSelector.tsxarchon-ui-main/src/features/knowledge/inspector/components/InspectorSidebar.tsxarchon-ui-main/src/features/knowledge/components/TagInput.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeCardType.tsxarchon-ui-main/src/features/knowledge/inspector/components/InspectorHeader.tsxarchon-ui-main/src/features/knowledge/components/AddKnowledgeDialog.tsxarchon-ui-main/src/features/knowledge/components/LevelSelector.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeTable.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeCard.tsxarchon-ui-main/src/features/knowledge/inspector/components/ContentViewer.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeHeader.tsxarchon-ui-main/src/features/ui/primitives/switch.tsx
archon-ui-main/src/features/*/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Place new UI components under src/features/[feature]/components
Files:
archon-ui-main/src/features/knowledge/components/KnowledgeList.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeCardTags.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeTypeSelector.tsxarchon-ui-main/src/features/knowledge/components/TagInput.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeCardType.tsxarchon-ui-main/src/features/knowledge/components/AddKnowledgeDialog.tsxarchon-ui-main/src/features/knowledge/components/LevelSelector.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeTable.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeCard.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeHeader.tsx
archon-ui-main/src/features/**/components/**/*.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
archon-ui-main/src/features/**/components/**/*.tsx: Create UI components under src/features/[feature]/components/ using Radix UI primitives from src/features/ui/primitives/
Apply Tron-inspired glassmorphism styling with Tailwind and follow responsive (mobile-first) patterns
Files:
archon-ui-main/src/features/knowledge/components/KnowledgeList.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeCardTags.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeTypeSelector.tsxarchon-ui-main/src/features/knowledge/inspector/components/InspectorSidebar.tsxarchon-ui-main/src/features/knowledge/components/TagInput.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeCardType.tsxarchon-ui-main/src/features/knowledge/inspector/components/InspectorHeader.tsxarchon-ui-main/src/features/knowledge/components/AddKnowledgeDialog.tsxarchon-ui-main/src/features/knowledge/components/LevelSelector.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeTable.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeCard.tsxarchon-ui-main/src/features/knowledge/inspector/components/ContentViewer.tsxarchon-ui-main/src/features/knowledge/components/KnowledgeHeader.tsx
archon-ui-main/src/features/*/hooks/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use feature-scoped TanStack Query hooks in src/features/[feature]/hooks
Files:
archon-ui-main/src/features/knowledge/hooks/useKnowledgeQueries.ts
archon-ui-main/src/features/**/hooks/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use TanStack Query hooks from src/features/[feature]/hooks/ for data fetching
Files:
archon-ui-main/src/features/knowledge/hooks/useKnowledgeQueries.ts
archon-ui-main/src/features/ui/primitives/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use Radix UI primitives from src/features/ui/primitives when creating UI components
Files:
archon-ui-main/src/features/ui/primitives/switch.tsx
🧠 Learnings (1)
📚 Learning: 2025-10-10T01:22:49.036Z
Learnt from: CR
PR: coleam00/Archon#0
File: CLAUDE.md:0-0
Timestamp: 2025-10-10T01:22:49.036Z
Learning: Applies to archon-ui-main/src/features/**/*.tsx : Ensure no dynamic Tailwind class construction (avoid runtime-generated class strings)
Applied to files:
archon-ui-main/src/features/knowledge/components/KnowledgeCardTags.tsx
🧬 Code graph analysis (7)
archon-ui-main/src/features/knowledge/components/KnowledgeTypeSelector.tsx (1)
archon-ui-main/src/features/ui/primitives/styles.ts (2)
glassCard(122-566)cn(605-607)
archon-ui-main/src/features/knowledge/components/TagInput.tsx (1)
archon-ui-main/src/features/ui/primitives/styles.ts (2)
cn(605-607)glassCard(122-566)
archon-ui-main/src/features/knowledge/components/AddKnowledgeDialog.tsx (2)
archon-ui-main/src/features/ui/primitives/tabs.tsx (2)
TabsList(9-23)TabsTrigger(29-101)archon-ui-main/src/features/ui/primitives/styles.ts (2)
cn(605-607)glassCard(122-566)
archon-ui-main/src/features/knowledge/components/LevelSelector.tsx (2)
archon-ui-main/src/features/ui/primitives/tooltip.tsx (3)
Tooltip(9-9)TooltipTrigger(12-12)TooltipContent(15-50)archon-ui-main/src/features/ui/primitives/styles.ts (2)
glassCard(122-566)cn(605-607)
archon-ui-main/src/features/knowledge/components/KnowledgeTable.tsx (3)
archon-ui-main/src/features/ui/primitives/styles.ts (1)
cn(605-607)archon-ui-main/src/features/ui/primitives/button.tsx (1)
Button(11-130)archon-ui-main/src/features/ui/primitives/dropdown-menu.tsx (5)
DropdownMenu(7-7)DropdownMenuTrigger(8-8)DropdownMenuContent(15-42)DropdownMenuItem(46-69)DropdownMenuSeparator(143-152)
archon-ui-main/src/features/knowledge/components/KnowledgeCard.tsx (3)
archon-ui-main/src/features/ui/primitives/styles.ts (1)
cn(605-607)archon-ui-main/src/features/ui/primitives/data-card.tsx (4)
DataCard(21-103)DataCardHeader(108-116)DataCardContent(121-129)DataCardFooter(134-149)archon-ui-main/src/features/progress/components/KnowledgeCardProgress.tsx (1)
KnowledgeCardProgress(16-134)
archon-ui-main/src/features/knowledge/components/KnowledgeHeader.tsx (4)
archon-ui-main/src/features/ui/primitives/button.tsx (1)
Button(11-130)archon-ui-main/src/features/ui/primitives/input.tsx (1)
Input(8-29)archon-ui-main/src/features/ui/primitives/toggle-group.tsx (2)
ToggleGroup(14-30)ToggleGroupItem(37-61)archon-ui-main/src/features/ui/primitives/styles.ts (1)
cn(605-607)
🪛 ast-grep (0.39.6)
archon-ui-main/src/features/knowledge/inspector/components/ContentViewer.tsx
[warning] 195-195: Usage of dangerouslySetInnerHTML detected. This bypasses React's built-in XSS protection. Always sanitize HTML content using libraries like DOMPurify before injecting it into the DOM to prevent XSS attacks.
Context: dangerouslySetInnerHTML
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
- https://cwe.mitre.org/data/definitions/79.html
(react-unsafe-html-injection)
🔇 Additional comments (24)
archon-ui-main/src/features/knowledge/inspector/components/InspectorSidebar.tsx (1)
131-131: LGTM! Dark mode color adjustments improve readability.The language badge (line 131) and Load More button (line 160) now use lighter color variants in dark mode (
text-green-400,text-cyan-400) compared to light mode (text-green-600,text-cyan-600), which provides better contrast and readability on dark backgrounds.Also applies to: 160-160
archon-ui-main/src/features/ui/primitives/switch.tsx (2)
108-122: ForwardRef props/ref separation LGTMClean split of props and ref. Destructuring checked/defaultChecked/onCheckedChange ensures {...props} won’t override controlled state handlers. Order of props is safe.
145-145: Trailing comma aligns with Biome rulesDependency array formatting is correct and non-behavioral.
archon-ui-main/src/features/knowledge/inspector/components/InspectorHeader.tsx (1)
41-42: LGTM! Dark mode support for badges.The color updates improve light-mode contrast (darker text) while adding appropriate dark-mode variants. Consistent with the broader UI refactor.
Also applies to: 63-64
archon-ui-main/src/features/knowledge/components/KnowledgeTypeSelector.tsx (1)
67-97: LGTM! Centralized glassCard styling with edge-lit selection.The refactor successfully replaces explicit gradients/borders with glassCard tokens. The edge-lit effects (top border line + vertical glow) provide clear visual feedback for the selected state, consistent with UI_STANDARDS.md.
archon-ui-main/src/features/knowledge/components/KnowledgeCardTags.tsx (1)
218-221: LGTM! Formatting for readability.The array.join(" ") pattern improves readability without violating the "no dynamic Tailwind class construction" guideline. All classes remain static strings (not runtime-generated), which ensures Tailwind's purge/tree-shaking works correctly.
Based on coding guidelines.
Also applies to: 261-264, 331-336, 352-355, 363-366
archon-ui-main/src/features/knowledge/components/KnowledgeList.tsx (1)
110-110: LGTM! Dark mode support for alert states.The dark mode variants maintain consistent visual hierarchy in both themes.
Also applies to: 133-133
archon-ui-main/src/features/knowledge/views/KnowledgeView.tsx (2)
144-144: LGTM! Dark mode support for status indicator.The dark mode variant maintains the animated pulse effect in both themes.
76-76: Redundantop.errorfallback removed – safe to drop:ActiveOperationdefines only a mandatorymessageand noerrorfield, so all error details flow throughmessage.archon-ui-main/src/features/knowledge/components/KnowledgeCardType.tsx (1)
75-76: LGTM! Updated color scheme with dark mode support.The color updates (cyan for technical, purple for business) align with the broader UI refactor and match the scheme used in KnowledgeTypeSelector.tsx. Dark mode variants ensure proper contrast in both themes.
Also applies to: 114-115
archon-ui-main/src/features/knowledge/components/TagInput.tsx (4)
78-83: LGTM! Improved UX with inline help text.Moving the help text to the header makes it more discoverable than placing it below the input. The compact instruction format is clear and actionable.
88-114: LGTM! Centralized glassCard styling for tag chips.The refactor correctly applies glassCard tokens (blur.md, tints.blue.medium) and improves the React key from array index to tag value, which is better for reconciliation when tags are reordered or removed. The aria-hidden on the icon is correct since the button has an aria-label.
130-136: LGTM! Consistent glassCard styling for input field.The input styling now uses centralized glassCard tokens, maintaining consistency with other refactored components.
139-144: LGTM! Helpful tag count display.The tag count provides useful feedback on usage limits.
archon-ui-main/package.json (1)
52-52: No action needed—prismjs ^1.30.0 includes patches for all known advisories (DOM clobbering and XSS fixed in 1.30.0).archon-ui-main/src/features/knowledge/components/AddKnowledgeDialog.tsx (2)
137-147: Tabs migration LGTMAdoption of TabsList/TabsTrigger with icons is clean and accessible. Good use of primitives and consistent styling.
168-173: Input glass styles integration looks goodUsing glassCard blur/transparency with cn keeps classes static and purge-safe. No issues.
archon-ui-main/src/features/knowledge/components/KnowledgeCard.tsx (3)
83-90: Edge color mapping logic is clear and minimalGood, maps state to constrained edge colors supported by DataCard/glassCard.
124-133: Optimistic and hover states look goodUse of ring on optimistic and subtle hover shadow is consistent with the glass theme.
93-99: No action needed: 'yellow' accentColor is supported
TheaccentColorprop union includes "yellow", and both ICON_COLOR_CLASSES and TOOLTIP_COLOR_CLASSES define a "yellow" entry.archon-ui-main/src/features/knowledge/components/LevelSelector.tsx (3)
69-81: LGTM on structured Tooltip around labelConsistent primitives usage, accessible button trigger, and concise content. Looks good.
112-119: Styling modernization looks solidGood adoption of glassCard tokens and focus-visible rings. Selection/disabled states are clear and consistent with UI standards.
9-9: SimpleTooltip import validSimpleTooltipis exported fromui/primitives/tooltip.tsx; no action required.archon-ui-main/src/features/knowledge/inspector/components/ContentViewer.tsx (1)
163-176: Markdown rendering is secure ReactMarkdown is used withoutrehypeRaw/allowDangerousHtml, so HTML is escaped by default. No sanitization plugin is required unless raw HTML support is added later.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
archon-ui-main/src/features/knowledge/components/KnowledgeTable.tsx (1)
148-166: Protocol restriction implemented; consider icon and color refinement.The unsafe protocol concern has been addressed—non-http(s) URLs are now rendered as plain text instead of clickable links. However, the implementation deviates slightly from the previous suggestion:
- Both safe and unsafe protocols use the
ExternalLinkicon, which may be misleading for non-clickable items- The unsafe case lacks the muted text color (
text-gray-500 dark:text-gray-400)Consider this refinement for visual clarity:
) : ( - <span className="inline-flex items-center gap-1"> - <ExternalLink className="w-3.5 h-3.5" /> + <span className="inline-flex items-center gap-1 text-gray-500 dark:text-gray-400"> + <FileText className="w-3.5 h-3.5" /> <span className="truncate inline-block">{getHostname(item.url)}</span> </span>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
archon-ui-main/src/features/knowledge/components/KnowledgeTable.tsx(1 hunks)archon-ui-main/src/features/knowledge/inspector/components/ContentViewer.tsx(5 hunks)
🧰 Additional context used
📓 Path-based instructions (7)
archon-ui-main/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
archon-ui-main/src/**/*.{ts,tsx}: Frontend TypeScript must use strict mode with no implicit any
Use TanStack Query for all data fetching; avoid prop drilling
Use database values directly in the frontend; avoid mapping layers between BE and FE typesNever return null to indicate failure in frontend TypeScript; throw errors with details instead
Files:
archon-ui-main/src/features/knowledge/components/KnowledgeTable.tsxarchon-ui-main/src/features/knowledge/inspector/components/ContentViewer.tsx
archon-ui-main/src/features/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use Biome in features: 120 character line length, double quotes, and trailing commas
Use Biome formatting/conventions in features (120 char lines, double quotes, trailing commas)
Files:
archon-ui-main/src/features/knowledge/components/KnowledgeTable.tsxarchon-ui-main/src/features/knowledge/inspector/components/ContentViewer.tsx
archon-ui-main/src/features/*/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Place new UI components under src/features/[feature]/components
Files:
archon-ui-main/src/features/knowledge/components/KnowledgeTable.tsx
archon-ui-main/src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use ESLint rules for legacy frontend code outside /src/features
Files:
archon-ui-main/src/features/knowledge/components/KnowledgeTable.tsxarchon-ui-main/src/features/knowledge/inspector/components/ContentViewer.tsx
archon-ui-main/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
TypeScript strict mode with no implicit any in the frontend
Files:
archon-ui-main/src/features/knowledge/components/KnowledgeTable.tsxarchon-ui-main/src/features/knowledge/inspector/components/ContentViewer.tsx
archon-ui-main/src/features/**/components/**/*.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
archon-ui-main/src/features/**/components/**/*.tsx: Create UI components under src/features/[feature]/components/ using Radix UI primitives from src/features/ui/primitives/
Apply Tron-inspired glassmorphism styling with Tailwind and follow responsive (mobile-first) patterns
Files:
archon-ui-main/src/features/knowledge/components/KnowledgeTable.tsxarchon-ui-main/src/features/knowledge/inspector/components/ContentViewer.tsx
archon-ui-main/src/features/**/*.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
Ensure no dynamic Tailwind class construction (avoid runtime-generated class strings)
Files:
archon-ui-main/src/features/knowledge/components/KnowledgeTable.tsxarchon-ui-main/src/features/knowledge/inspector/components/ContentViewer.tsx
🧬 Code graph analysis (1)
archon-ui-main/src/features/knowledge/components/KnowledgeTable.tsx (3)
archon-ui-main/src/features/ui/primitives/styles.ts (1)
cn(605-607)archon-ui-main/src/features/ui/primitives/button.tsx (1)
Button(11-130)archon-ui-main/src/features/ui/primitives/dropdown-menu.tsx (5)
DropdownMenu(7-7)DropdownMenuTrigger(8-8)DropdownMenuContent(15-42)DropdownMenuItem(46-69)DropdownMenuSeparator(143-152)
🪛 ast-grep (0.39.6)
archon-ui-main/src/features/knowledge/inspector/components/ContentViewer.tsx
[warning] 202-202: Usage of dangerouslySetInnerHTML detected. This bypasses React's built-in XSS protection. Always sanitize HTML content using libraries like DOMPurify before injecting it into the DOM to prevent XSS attacks.
Context: dangerouslySetInnerHTML
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
- https://cwe.mitre.org/data/definitions/79.html
(react-unsafe-html-injection)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Backend Tests (Python + pytest)
🔇 Additional comments (9)
archon-ui-main/src/features/knowledge/components/KnowledgeTable.tsx (2)
68-95: LGTM: Safe helper functions with proper error handling.All three utility functions implement correct error handling patterns:
getHostname: Safe URL parsing with fallback to the original stringisSafeProtocol: Validates http/https protocols with false as the safe defaultformatCreatedDate: Guards against invalid dates and returns "N/A" on errorNo null returns, proper try-catch blocks, and sensible defaults throughout.
97-229: LGTM: Well-structured table with comprehensive dark mode support.The table implementation demonstrates solid practices:
- Responsive layout with overflow handling
- Dark mode variants across all elements (headers, rows, cells, actions)
- Static Tailwind classes throughout (no dynamic class construction)
- Per-row
isDeletingstate provides clear UX feedback- Proper use of UI primitives (
Button,DropdownMenu) from the centralized library- Accessible actions with keyboard navigation support
The zebra striping (line 121) correctly uses static class strings selected by ternary, which complies with the Tailwind guidelines.
archon-ui-main/src/features/knowledge/inspector/components/ContentViewer.tsx (7)
39-57: Security concern properly addressed.The previous review flagged XSS risk with
dangerouslySetInnerHTML, but this implementation correctly addresses it by escaping HTML entities before passing to Prism (lines 44-47), which is the recommended approach per Prism documentation. The error fallback (line 55) also escapes properly.This approach is superior to post-sanitization because it prevents injection at the source. Based on learnings.
59-82: LGTM!The backtick-stripping logic correctly handles markdown code blocks with and without language identifiers, including edge cases where backticks lack surrounding newlines.
115-119: LGTM!The array-join pattern for organizing class names is acceptable and does not violate the "no dynamic Tailwind class construction" guideline, as all classes are static strings known at compile time.
169-184: LGTM!ReactMarkdown is used correctly with custom component styling and no raw HTML rendering. The implementation follows react-markdown v10.x best practices by using the children prop and providing safe component overrides.
186-210: LGTM!The code highlighting implementation is secure because
highlightCodepre-escapes HTML entities before Prism processing (as reviewed earlier). The IIFE pattern for extracting language once is clean, and the class names are statically defined.
224-236: LGTM!The conditional URL rendering includes proper null-safe checks and uses
target="_blank"withrel="noopener noreferrer"for secure external links.
7-19: prismjs@^1.30.0 is already installed, addressing DOM-clobbering and XSS advisories.
Merged in PR #776 (refactor/knowledge-ui) from main. No conflicts - different features.
Refactoring the UI for consistent styling
Merged in PR coleam00#776 (refactor/knowledge-ui) from main. No conflicts - different features.
…#776) * feat: add archon-refactor-safely workflow + Windows/persistence fixes - Add bundled archon-refactor-safely workflow: 8-phase DAG that safely decomposes large files (scan → impact analysis → plan → execute with type-check hooks → validate → fix failures → verify behavior → PR) - Extract getProcessUid() from ClaudeClient for cross-platform compat (process.getuid exists as non-function on Windows, crashing optional chaining) - Fix terminal tool calls not finalized in MessagePersistence flush: pre-finalize last tool in each segment before ready/pending split so segments with completed-but-unflushed tools are not stuck as pending - Remove dead worktree limit tests (no implementation exists on dev) * fix: address review findings for refactor-safely PR - Remove dead hooks spread in claude.ts (overridden by later explicit key) - Fix verify-behavior node referencing Bash when denied_tools blocks it - Add regression test for terminal tool call pre-finalization in flush() - Add test for Windows getProcessUid (undefined return) path - Add warn log for unmatched tool results in appendToolResult - Improve persistence.ts comment precision about in-flight predicate - Remove dead pending spread in no-dbId restore path - Add archon-refactor-safely to docs/getting-started.md workflow table - Fix stale worktree limit references in orchestration research doc
…coleam00#776) * feat: add archon-refactor-safely workflow + Windows/persistence fixes - Add bundled archon-refactor-safely workflow: 8-phase DAG that safely decomposes large files (scan → impact analysis → plan → execute with type-check hooks → validate → fix failures → verify behavior → PR) - Extract getProcessUid() from ClaudeClient for cross-platform compat (process.getuid exists as non-function on Windows, crashing optional chaining) - Fix terminal tool calls not finalized in MessagePersistence flush: pre-finalize last tool in each segment before ready/pending split so segments with completed-but-unflushed tools are not stuck as pending - Remove dead worktree limit tests (no implementation exists on dev) * fix: address review findings for refactor-safely PR - Remove dead hooks spread in claude.ts (overridden by later explicit key) - Fix verify-behavior node referencing Bash when denied_tools blocks it - Add regression test for terminal tool call pre-finalization in flush() - Add test for Windows getProcessUid (undefined return) path - Add warn log for unmatched tool results in appendToolResult - Improve persistence.ts comment precision about in-flight predicate - Remove dead pending spread in no-dbId restore path - Add archon-refactor-safely to docs/getting-started.md workflow table - Fix stale worktree limit references in orchestration research doc
…coleam00#776) * feat: add archon-refactor-safely workflow + Windows/persistence fixes - Add bundled archon-refactor-safely workflow: 8-phase DAG that safely decomposes large files (scan → impact analysis → plan → execute with type-check hooks → validate → fix failures → verify behavior → PR) - Extract getProcessUid() from ClaudeClient for cross-platform compat (process.getuid exists as non-function on Windows, crashing optional chaining) - Fix terminal tool calls not finalized in MessagePersistence flush: pre-finalize last tool in each segment before ready/pending split so segments with completed-but-unflushed tools are not stuck as pending - Remove dead worktree limit tests (no implementation exists on dev) * fix: address review findings for refactor-safely PR - Remove dead hooks spread in claude.ts (overridden by later explicit key) - Fix verify-behavior node referencing Bash when denied_tools blocks it - Add regression test for terminal tool call pre-finalization in flush() - Add test for Windows getProcessUid (undefined return) path - Add warn log for unmatched tool results in appendToolResult - Improve persistence.ts comment precision about in-flight predicate - Remove dead pending spread in no-dbId restore path - Add archon-refactor-safely to docs/getting-started.md workflow table - Fix stale worktree limit references in orchestration research doc
1 participant
Pull Request
Summary
Comprehensive refactor of Knowledge Base feature to align with UI_STANDARDS.md, replacing custom styling with centralized primitives, improving accessibility, and enhancing document/code viewing with markdown rendering and syntax highlighting.
Changes Made
glassCard.edgeLiteffectsType of Change
Affected Services
Testing
Test Evidence
Checklist
Breaking Changes
None. This is a pure refactoring - all functionality remains identical.
Additional Notes
UI Standards Compliance
Code Quality Improvements
glassCardutilities fromstyles.tsVisual Enhancements
Dependencies Added
@types/prismjs(devDependency) - TypeScript types for Prism syntax highlighterFiles Modified (17)
Components:
Inspector:
Hooks:
Views:
Primitives:
Files Deleted (1)
PRPs Completed
PRPs/story_knowledge base_ui_refactor_style_guide_compliance.mdPRPs/story_knowledge_ui_polish_fixes.mdCodeRabbit Review
All issues addressed:
Screenshots
Markdown rendering now shows formatted headers, lists, and styled elements in cyan/purple theme. Code examples display with syntax highlighting and cyan glow border.
Summary by CodeRabbit
New Features
Style
Refactor
Removed